<template>
	<view class="shop-home">
		<NavBar title="管理中心"/>
		<view class="content">
			<UserInfo :todayPrice="shopInfo.today_money" :todayOrder="shopInfo.today_order_num" />
			<view class="my-wallet" @tap="goTX">
				<view class="item">
					<view class="wallet-title"> 我的钱包 </view>
					<view class="wallet-price"> {{ shopInfo.my_moeny?.num?shopInfo.my_moeny?.num:'0.00' }} </view>
				</view>
				<image src="/static/icon/order/right.png" class="w-img"/>
			</view>
			<!-- app端 饼状图 -->
			<!-- #ifdef APP -->
				<OrderData :data="shopInfo.order_status_num" />
			<!-- #endif -->
			<!-- 非 app 端 饼状图 -->
			<!-- #ifndef APP -->
				<MPOrderData :data="shopInfo.order_status_num" :total="orderTotal"/>
			<!-- #endif -->
			<!-- 常用工具 -->
			<view class="tools">
				<view class="tools-name"> 常用工具 </view>
				<view class="tool-list">
					<view class="tool-item" @tap="nav(item.url)" v-for="item in listArr" :key="item">
						<image :src="item.icon" class="t-img"/>
						<view class="tool-text"> {{item.title}} </view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue'
	import UserInfo from './components/UserInfo.vue'
	import OrderData from './components/OrderData.vue'
	import MPOrderData from './components/MPOrderData.vue'
	import { GetShopDataApi } from '@/service/shop.js'
	import { useUserStore } from '@/store/index.js'
	const listArr = ref([
		{ icon: '/static/icon/shop/goodsmanage.png', title: '商品管理', url: '/pages/shopPages/goodsManage/goodsManage' },
		{ icon: '/static/icon/shop/fbgoods.png', title: '发布商品', url: '/pages/shopPages/releaseGoods/releaseGoods' },
		{ icon: '/static/icon/shop/fborder.png', title: '订单管理', url: '/pages/shopPages/orderManage/orderManage' },
		{ icon: '/static/icon/shop/zxshop.png', title: '店铺装修', url: '/pages/shopPages/shopDecoration/shopDecoration' },
		{ icon: '/static/icon/shop/category.png', title: '分类管理', url: '/pages/shopPages/classfyManage/classfyManage' },
		{ icon: '/static/icon/shop/psmanage.png', title: '配送管理', url: '/pages/shopPages/distributionManage/distributionManage' },
		{ icon: '/static/icon/shop/evamanage.png', title: '评价管理', url: '/pages/shopPages/EvaluationManage/EvaluationManage' },
		{ icon: '/static/icon/shop/msgmanage.png', title: '消息管理', url: '' },
		{ icon: '/static/icon/productDetails/store.png', title: '我的店铺', url: '/pages/shopPages/myShop/myShop' },
		{ icon: '/static/tabIcon/rider_home.png', title: '合作骑手', url: '/pages/shopPages/coRider/coRider' },
		{ icon: '/static/icon/rider/wallect.png', title: '提现设置', url: '/pages/riderPages/withdrawal/withdrawal' }
	])
	const shopInfo = ref({
		my_moeny: {
			id: '',
			name: '',
			num: '',
			type: ''
		},
		order_status_num: {
			status_0: '', // 待付款
			status_1: '', // 代发货
			status_2: '', // 已发货
			status_3: '', // 已完成
			status_4: '', // 已关闭
			status_5: '', // 退款中
		},
		today_money: {
			name: '今日收入',
			num: ''
		},
		today_order_num: {
			name: '今日订单',
			num: ''
		}
	})
	const orderTotal = ref(0)
	const getShopInfo = () => {
		const { userInfo } = useUserStore()
		GetShopDataApi({shop_id: userInfo.shop_id}).then(res => {
			shopInfo.value = res
			const { status_0, status_1, status_2, status_3, status_4, status_5 } = shopInfo.value.order_status_num
			orderTotal.value = status_0 + status_1 + status_2 + status_3 + status_4 + status_5
		})
	}
	const nav = (url) => {
		uni.navigateTo({ url })
	}
	const goTX = () => {
		uni.navigateTo({
			url: `/pages/riderPages/myWallet/myWallet?type=shop_deposit&price=${shopInfo.value.my_moeny.num}`
		})
	}
	onShow(() => {
		getShopInfo()
	})
</script>

<style scoped lang="scss">
	.shop-home {
		.content {
			padding: 10px 12px;
			box-sizing: border-box;
		}
		.my-wallet {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 10px;
			margin-bottom: 10px;
			background-color: #fff;
			padding: 10px 10px 13px 14px;
			.item {
				.wallet-title {
					color: #333333;
					font-size: 12px;
					font-weight: 400;
					line-height: 22px;
					margin-bottom: 7px;
				}
				.wallet-price {
					color: #333333;
					font-size: 20px;
					font-weight: 700;
					line-height: 22px;
				}
			}
			.w-img {
				width: 14px;
				height: 14px;
			}
		}
		.tools {
			padding: 15px 12px 30px;
			border-radius: 10px;
			background-color: #fff;
			.tools-name {
				color: #333333;
				font-size: 16px;
				font-weight: 500;
				line-height: 20px;
				margin-bottom: 22px;
			}
			.tool-list {
				display: grid;
				gap: 26px;
				grid-template-columns: repeat(4, 1fr);
				.tool-item {
					text-align: center;
					.t-img {
						width: 24px;
						height: 24px;
						margin-bottom: 8px;
					}
					view {
						color: #555555;
						font-size: 12px;
						font-weight: 400;
						line-height: 14px;
					}
				}
			}
		}
	}
</style>
